<template>
    <div class="isMask">
        <div class="isMask_mask" @click="cencleClick"></div>
        <div class="isMask_Content" @click="">
            <div class="isMask_Content_Header">
                <text class="isMask_Content_Header_Title">店铺优惠</text>
                <icon content="md-close-circle" class="isMask_Content_Header_Icon" @click="cencleClick"></icon>
            </div>
            <div class="isMask_Content_Content" v-for="item in promotions">
                <text class="isMask_Content_Content_Title">{{item.typeName}}</text>
                <text class="isMask_Content_Content_Title">{{item.title}}</text>
            </div>
            <div class="isMask_Content_Content">
                <text class="isMask_Content_Content_Title" v-if="couponCodeName !=''">优惠券</text>
                <text class="isMask_Content_Content_Title">{{couponCodeName}}</text>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{

            }
        },
        props:[
            'promotions','couponCodeName'
        ],
        mounted(){
            var _this = this
            _this.promotions.forEach(function(item) {
                if (item.type == 0) {
                    item.typeName = '新人礼包'
                } else if (item.type == 1) {
                    item.typeName = '消费后送'
                } else if (item.type == 2) {
                    item.typeName = '扫码领券'
                } else if (item.type == 3) {
                    item.typeName = '满减'
                } else if (item.type == 4) {
                    item.typeName = '满折'
                } else if (item.type == 5) {
                    item.typeName = '满赠'
                } else if (item.type == 6) {
                    item.typeName = '满包邮'
                } else if (item.type == 7) {
                    item.typeName = '买送'
                } else if (item.type == 8) {
                    item.typeName = '秒杀'
                } else if (item.type == 9) {
                    item.typeName = '第二件半价'
                } else if (item.type == 10) {
                    item.typeName = '新人价'
                }
            })
            _this.$forceUpdate()
        },
        methods:{
            cencleClick() {
                var cenclecoupons = {
                    cenclecoupons: false
                };
                this.$emit("cenclecoupons", cenclecoupons)
            },
        }
    }
</script>

<style scoped>
    .isMask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 999
    }
    .isMask_mask{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3)
    }
    .isMask_Content {
        width: 750px;
        height: 800px;
        background-color: white;
        position: fixed;
        bottom: 0;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        box-sizing: border-box;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .isMask_Content_Header {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 50px;
    }

    .isMask_Content_Header_Title {
        font-size: 30px;
    }

    .isMask_Content_Header_Icon {
        position: absolute;
        right: 0px;
        /*color: rgba(0, 0, 0, 0.3);*/
        /*padding-left: 50px;*/
        width: 50px;
        height: 50px;
    }

    .isMask_Content_Content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .isMask_Content_Content_Title {
        font-size: 32px;
    }

    .isMask_Content_Content_IconBox {
        width: 30px;
        height: 30px;
        border-radius: 50px;
        background-image: linear-gradient(to bottom, rgba(233, 88, 79, 1), rgba(241, 114, 80, 1));
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Content_Content_No_IconBox{
        width: 30px;
        height: 30px;
        border-radius: 50px;
        border-color:  rgba(0, 0, 0, 0.3);
        border-style: solid;
        border-width: 1px;
    }

    .isMask_Botton {
        width: 750px;
        position: absolute;
        bottom: 30px;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Box {
        width: 690px;
        height: 80px;
        background-image: linear-gradient(to bottom, rgba(233, 88, 79, 1), rgba(241, 114, 80, 1));
        border-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Title {
        font-size: 30px;
        color: white;
    }

    .isMask_Content_Content_Icon{
        color: white;
        font-size: 24px;
    }
</style>
